<template>
    <h1 class="mod-title">
        <span :class="PayInfo.type == 'wx' ? 'ico_log ico-3' : 'ico_log ico-4'"></span>
    </h1>

    <div class="mod-ct">
        <div class="order">
        </div>

        <div style="margin-top: 10px;">
            <span style="color: red;">提示：付款金额要与显示的金额一致，否则后果自负</span>
        </div>
        
        <div class="amount" id="money">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText" class="amount2">{{ PayInfo.price }}</span>元
            <span @click="OnCopy" style="font-size: 10px;color: darkcyan;">&nbsp;&nbsp;复制金额</span>
        </div>

        <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
            <div data-role="qrPayImg" class="qrcode-img-area">
                <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;"></div>
                <div style="position: relative;display: inline-block;">
                    <img id="imgCode" :src="PayInfo.wxcode" style="width: 220px;" v-if="PayInfo.type === 'wx'" />
                    
                    <img id="imgCode" :src="PayInfo.zfbcode" style="width: 220px;" v-else-if="PayInfo.type === 'zfb'" />
                </div>
            </div>
        </div>

        <div class="time-item" style="padding-top: 10px">
            <div class="time-item" id="msg">
                <h1 class="overtime">订单名称：{{ PayInfo.name }}<span></span></h1>
            </div>

            <div class="time-item">
                <h1>订单号:<span data-payid="">{{ PayInfo.code }}</span></h1>
                <input type="hidden" :value="PayInfo.id" id="payid">
            </div>

            <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
            <strong id="minute_show">0分</strong>
            <strong id="second_show">0秒</strong>
            <div class="time-item"></div>
        </div>

        <div class="tip">
            <div class="ico-scan"></div>
            <div class="tip-text">
                <p id="showtext" v-if="PayInfo.type === 'wx'">打开微信[扫一扫]</p>
                <p id="showtext" v-else-if="PayInfo.type === 'zfb'">打开支付宝[扫一扫]</p>
            </div>
        </div>

        <!--[if IE 8]>
            <div class="tip-text" style="color:#ff0000">您的浏览器版本较低，请升级后再试！</div>
        <![endif]-->
    </div>
</template>

<script setup>
    const { proxy } = getCurrentInstance();

    const payid = ref(proxy.$route.query.payid ?? 0);
    const MaxTime = ref(3 * 60);// 默认多少时间关闭当前页面
    const PayInfo = ref({});// 支付订单数据
    const timers = ref(null);// 倒计时定时器
    const interval = ref(null);// 轮询订单状态定时器

    onMounted(() => {

        GetPayInfo();
    })

    const GetPayInfo = async () =>
    {
        let params = {
            payid:payid.value
        }

        let result = await proxy.$POST({
            url:'/pay/info',
            params
        })

        if(result.code === 1)
        {
            PayInfo.value = result.data;

            timers.value = setInterval(CountDown,1000);
            interval.value = setInterval(GetStatus,1000);
        }else
        {
            proxy.$fail({
                message:result.msg,
                onClose:() =>
                {
                    proxy.$router.back();
                }
            })
        }
    }

    const OnCopy = () =>
    {
        let text = document.getElementById("copyText").innerText;
        let input = document.createElement('input');
        input.setAttribute('id', 'copyInput');
        input.setAttribute('value', text);

        document.getElementsByTagName('body')[0].appendChild(input);

        document.getElementById('copyInput').select();

        document.execCommand('copy');

        proxy.$success('已复制金额');

        document.getElementById('copyInput').remove();
    }

    const CountDown = () =>
    {
        if(MaxTime.value >= 0) 
        {
            let minutes = Math.floor(MaxTime.value / 60);
            let seconds = Math.floor(MaxTime.value % 60);
            document.getElementById('minute_show').innerText = minutes + "分";
            document.getElementById('second_show').innerText = seconds + "秒";

            --MaxTime.value;
        }else 
        {
            clearInterval(timers.value);
            clearInterval(interval.value);
            document.getElementById('imgCode').src = '/assets/pay/images/qrcode_timeout.png';

            proxy.$showDialog({
                title:'支付提示',
                message:'订单已失效'
            }).then(() =>
            {
                proxy.$router.back();
            })
        }
    }

    const GetStatus = async () =>
    {
        let params  = {
            payid:payid.value
        }

        let result = await proxy.$POST({
            url:'/pay/status',
            params
        })
        if(result.code === 1)
        {
            proxy.$showDialog({
                title:'支付提示',
                message:'支付成功'
            }).then(() =>
            {
                // 兼容购买商品跳转到订单详情
                if(result.data.jump.includes('?') === true)
                {
                    // path 路径 queryString 参数
                    let [path, queryString] = result.data.jump.split('?');

                    // 存放重组后的参数
                    let query = {};
  
                    // 参数存在就进入if
                    if(queryString)
                    {
                        // 遍历参数
                        queryString.split('&').forEach(param => {
                            let [key, value] = param.split('=');
                            query[key] = isNaN(value) ? value : Number(value);
                        });
                    }

                    // 先判断商品立即购买在本地存储当中是否存在缓存,如果有缓存就删除缓存
                    let cart = Object.getOwnPropertyNames(proxy.$cart.value).length > 0 ? proxy.$cart.value : [];

                    if(cart.length > 0)
                    {
                        proxy.$cart.value = {};
                    }
                    
                    proxy.$router.push({path,query,replace:true});
                }else
                {
                    proxy.$router.push({path:result.data.jump,replace:true});
                }
            })
        }else
        {
            if(result.msg === '支付订单不存在')
            {
                proxy.$fail({
                    message:result.msg,
                    onClose:() =>
                    {
                        proxy.$router.back();
                    }
                })
            }
        }
    }

    onBeforeUnmount(() =>{
        clearInterval(timers.value);
        clearInterval(interval.value);
    })

</script>

<style scoped>
@import url('/assets/css/cashier.css');
</style>